/*
 * @作者: 京涛
 * @时间: 2020-09-12 17:00:00
 * @最后修改时间: 2020-09-12 17:44:34
 * @FilePath: \曲美家具项目\js\cabinetArea.js
 * @项目名称: 每天都要记得写代码啊！
 */
/**
 * 中间的镜子效果的js
 */
/**
 * 声明一个数组，存放所有的图片对象。
 *    数组包括十个对象。
 *      每个对象包括:
 *        cabMirrorBgSrc : 背景图的路径
 *               textH3 : 标题文字
 *               textP  : 文字描述
 */
$(document).ready(function () {
  var cabMirrorObj = [{
      cabMirrorBgSrc: "./img/cabinetArea/cabMirrorBg01.jpg",
      textH3: "自如系列",
      textP: "独具匠心的弯曲木门板设计，简约而不简单 清新纯净的原木色与简练的线条结合 恰如精致生活中态度与品位的完美呈现 春夏秋冬，四时交替，是季节的曲线 简单大方，时尚流畅是曲美的曲线"
    },
    {
      cabMirrorBgSrc: "./img/cabinetArea/cabMirrorBg02.jpg",
      textH3: "暮光系列",
      textP: "晶莹剔透的玻璃材质，阳光下更觉赏人悦目，收纳也是应用到极致 吊地柜之间的铝制收纳柜设计，增加了三分之一的收纳空间，触手可及的位置，让操作更便捷"
    },
    {
      cabMirrorBgSrc: "./img/cabinetArea/cabMirrorBg03.jpg",
      textH3: "原工系列",
      textP: "浓重的工业风厨房设计，给人一种沉稳神秘的气息，裸露的水泥地，粗犷的木纹， 注入斑驳的黑色铁艺元素，像一个饱经风霜的绅士等你回来 "
    },
    {
      cabMirrorBgSrc: "./img/cabinetArea/cabMirrorBg04.jpg",
      textH3: "幻乐系列",
      textP: "讲究而不造作的生活方式，细节精致而不繁琐，电器、操作、休闲功能融为一体，给你闪亮好心情， 在张扬个性的厨房空间，可以肆意挥洒你的精湛厨艺"
    },
    {
      cabMirrorBgSrc: "./img/cabinetArea/cabMirrorBg05.jpg",
      textH3: "乐途系列",
      textP: "黑胡桃典雅精致，亮光蜜桔沉稳中透露一丝灵动，无限可亲的质朴气息扑面而来 无论是功能分区还是物品收纳都有条不紊，让我们充分感受厨房生活的乐趣"
    },
    {
      cabMirrorBgSrc: "./img/cabinetArea/cabMirrorBg06.jpg",
      textH3: "逸趣系列",
      textP: "简朴不加修饰却不失优雅别致，黑橡木色纯实木拉手与卡其色门板搭配相得宜彰； 可移动餐桌与橱柜相连，使得厨房整体性更强"
    },
    {
      cabMirrorBgSrc: "./img/cabinetArea/cabMirrorBg07.jpg",
      textH3: "原朗系列",
      textP: "吸塑玉青灰色门板，质朴自然，搭配古典顶线、十字格玻璃门 古典小白陶瓷的圆形拉手点缀，形成一幅充满回忆、浪漫的十八世纪欧洲乡村画卷"
    },
    {
      cabMirrorBgSrc: "./img/cabinetArea/cabMirrorBg08.jpg",
      textH3: "印象系列",
      textP: "永不落幕的韵律感、线条感、空间感的完美应用，橡木色与深蓝色的搭配 让这个厨房看起来清新又不俗，洋溢着活力焕发的味道。大气雅致，尽享烹饪好时"
    },
    {
      cabMirrorBgSrc: "./img/cabinetArea/cabMirrorBg09.jpg",
      textH3: "拾光系列",
      textP: "整套产品清新雅致；白木纹衬托出纯净，带着西方时尚的东方风情，如梦般醇美舒适！ 紧凑合理的空间布局，流露出人文关怀，不禁让人回味，畅享生活之美"
    },
    {
      cabMirrorBgSrc: "./img/cabinetArea/cabMirrorBg10.jpg",
      textH3: "香颂系列",
      textP: "韵味古雅，是对欧式文化的传承，展现属于它的从容和气度 透出低调的奢华，彰显了生活的灵感更表达了艺术的魅力所在"
    },
  ]
  //所有的图片点击之后改变背景图的图片路径，并改变文字内容
  $(".slideImg img").each(function (imgIndex, img) {
    $(img).click(function () {
      //点击图片改变对应的标题文本
      $(".cabMirrorText h2 a").html(cabMirrorObj[imgIndex].textH3)
      //点击图片改变对应的文字描述内容
      $(".cabMirrorText p").html(cabMirrorObj[imgIndex].textP)
      //点击图片改变对应的背景图路径
      $(".cabMirrorBg img").attr("src", cabMirrorObj[imgIndex].cabMirrorBgSrc)
      //点击的时候给所有的图片添加滤镜，并取消自己的滤镜
      $(".slideImg ul li").each(function () {
        $(this).removeClass("currentLi2");
        if ($(this).index() == imgIndex) {
          $(this).addClass("currentLi2")
        }
      });
    })
  })

  //点击下一个和上一个按钮的时候给slideImg ul 向左移动/向右移动
  var slideUlTranslate = ["0px", "-174px", "-348px", "-522px", "-696px", "-870px"]
  var slideUlIndex = 0;
  $(".pointLeft").click(function () {
    slideUlIndex = slideUlIndex == 0 ? 0 : slideUlIndex - 1;
    $(".slideImg ul").css({
      transform: "translateX(" + slideUlTranslate[slideUlIndex] + ")"
    });
  })
  $(".pointRight").click(function () {
    slideUlIndex = slideUlIndex == 5 ? 5 : slideUlIndex + 1;
    $(".slideImg ul").css({
      transform: "translateX(" + slideUlTranslate[slideUlIndex] + ")"
    });
  })
})